 

<template>
  <a-card class="icon-card">
    <a-card-grid
      v-for="(item, index) in iconList"
      :key="index"
      :class="defaultIcon === item.name ? 'active' : ''"
      @click.stop="handleClickIcon(item.name)"
    >
      <a-icon  :style="{ fontSize: '28px' }" :type="item.name" /> <br/>
      <span class="iconName">{{ item.name }}</span>
    </a-card-grid>
  </a-card>
</template>
<script>
import VueIcon from "@ant-design/icons-vue";
export default {
  name: "IconListBar",
  data() {
    return {
      icons: VueIcon.definitions.collection,
      iconList: [],
    };
  },
  created() {
    this.loadIconList();
  },
  methods: {
    loadIconList() {
      this.iconList = Object.values(this.icons).filter((t) => t);
    },
    handleClickIcon(icon) {
      this.$emit("callBackIcon", icon);
    },
  },
  props: {
    defaultIcon: {
      type: String,
      required: false,
    },
  },
};
</script>
<style lang="less" scoped>
.icon-card {
  width: 600px;
  height: 360px;
  overflow-y: auto;
}
.ant-card-grid {
  width: 25%;
  height: 80px;
  text-align: center;
  cursor: pointer;
}
.active {
  background-color: #1890ff;
  color: #fff;
}
.ant-card-grid:hover {
  background-color: #1890ff;
  color: #fff;
  .ant-card-meta-title:hover {
    color: #fff !important;
  }
}
iconName {
      display: block;
      text-align: center;
      transform: scale(0.83);
      font-family: Lucida Console, Consolas;
      white-space: nowrap;
    }
</style>
 